<template>
  <div class="app-container">
    <div class="content">
      <!-- 左侧垂直按钮区域 -->
      <div class="button-panel">
        <div class="action-group">
          <el-button
            type="primary"
            plain
            size="small"
            @click="handleAddEnvSpectrum"
          >
            环境光谱
          </el-button>
          <div v-if="envSpectrumNo" class="id-text">
            编号：{{ envSpectrumNo }}
          </div>
        </div>

        <div class="action-group">
          <el-button
            type="primary"
            plain
            size="small"
            @click="handleImportModel"
          >
            导入模型
          </el-button>
          <div v-if="modelNo" class="id-text">编号：{{ modelNo }}</div>
        </div>

        <div class="action-group">
          <el-button
            type="primary"
            plain
            size="small"
            @click="handleImportSampleSpectrum"
          >
            导入样品光谱
          </el-button>
          <div v-if="sampleSpectrumNo" class="id-text">
            编号：{{ sampleSpectrumNo }}
          </div>
        </div>

        <!-- <el-button
          type="primary"
          plain
          size="small"
          @click="handleImportExcelSpectrum"
        >
          导入excel光谱
        </el-button> -->
        <el-button
          type="primary"
          plain
          size="small"
          @click="handleStartAnalysis"
        >
          开始分析
        </el-button>
      </div>

      <!-- 图表区域 -->
      <div class="left-chart">
        <div ref="chartRef" class="chart-area">
          <stacked-line-chart
            v-if="seriesData.length > 0"
            title="样品光谱吸光度曲线"
            :xAxisData="xAxisData"
            :seriesData="seriesData"
          />
        </div>
      </div>
    </div>

    <div class="table">
      <el-table
        v-loading="loading"
        :data="dfbList"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <!-- <el-table-column
          label="分析结果编号"
          align="center"
          prop="onlineResultNo"
        /> -->
        <el-table-column
          label="成分名称"
          align="center"
          prop="constituentName"
        />
        <el-table-column label="预测值" align="center" prop="predicted" />
        <el-table-column label="模型编号" align="center" prop="modelNo" />
        <el-table-column
          label="部门名称"
          align="center"
          prop="departmentName"
        />
        <el-table-column label="仪器编号" align="center" prop="instrumentNo" />
        <el-table-column
          label="仪器名称"
          align="center"
          prop="instrumentName"
        />
        <el-table-column
          label="采样时间"
          align="center"
          prop="samplingTime"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.samplingTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              v-if="
                !scope.row.isSaved && !savingRows.has(scope.row.onlineResultNo)
              "
              :loading="savingRows.has(scope.row.onlineResultNo)"
              @click="handleSave(scope.row)"
            >
              保存
            </el-button>
            <el-button
              v-hasPermi="['analysis:dfb:edit']"
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              >修改</el-button
            >
            <el-button
              v-hasPermi="['analysis:dfb:remove']"
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 导入模型 -->
    <el-dialog
      title="模型"
      :visible.sync="modelDataDialogVisible"
      width="80vw"
      append-to-body
    >
      <model-data
        ref="modelData"
        :is-row-visible="false"
        :get-finished-data="true"
        @selection-change="handleModelRowSelection"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitModelDataForm">确 定</el-button>
        <el-button @click="modelDataDialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 导入环境光谱 -->
    <el-dialog
      title="环境光谱"
      :visible.sync="envSpectrumDialogVisible"
      width="80vw"
      append-to-body
    >
      <env-spectrum-detail
        ref="envData"
        :is-row-visible="false"
        @selection-change="handleSelectionChangeEnvSpectrum"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEnvForm">确 定</el-button>
        <el-button @click="envSpectrumDialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 导入样品光谱 -->
    <el-dialog
      title="样品光谱"
      :visible.sync="sampleSpectrumDialogVisible"
      width="30vw"
      append-to-body
    >
      <div
        style="
          display: flex;
          justify-content: center;
          gap: 16px;
          margin-top: 20px;
        "
      >
        <el-button type="primary" @click="handleAddZlaSpectrum"
          >制粒一样品光谱</el-button
        >
        <el-button @click="handleAddZlbSpectrum">制粒二样品光谱</el-button>
      </div>
    </el-dialog>

    <!-- 制粒一样品光谱 -->
    <el-dialog
      title="制粒一样品光谱"
      :visible.sync="zlaSpectrumDialogVisible"
      width="80vw"
      append-to-body
    >
      <zla-spectrum-detail
        ref="zlaData"
        :is-row-visible="false"
        @selection-change="handleSelectionZlaSpectrum"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSampleForm">确 定</el-button>
        <el-button @click="zlaSpectrumDialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 制粒二样品光谱 -->
    <el-dialog
      title="制粒二样品光谱"
      :visible.sync="zlbSpectrumDialogVisible"
      width="80vw"
      append-to-body
    >
      <zlb-spectrum-detail
        ref="zlbData"
        :is-row-visible="false"
        @selection-change="handleSelectionZlbSpectrum"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSampleForm">确 定</el-button>
        <el-button @click="zlbSpectrumDialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-drawer
      title="编辑分析结果"
      :visible.sync="drawerVisible"
      direction="rtl"
      size="30%"
    >
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="成分名称">
          <el-input v-model="editForm.constituentName" />
        </el-form-item>
        <el-form-item label="预测值">
          <el-input-number v-model="editForm.predicted" :precision="4" />
        </el-form-item>
        <!-- 其他字段... -->
      </el-form>

      <div class="drawer-footer">
        <el-button @click="drawerVisible = false">取消</el-button>
        <el-button type="primary" @click="handleDrawerConfirm">确定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  listOffline,
  getAnalyzePayload,
  addOffline,
  delOffline,
  updateOffline,
} from "@/api/analysis/offline";
import EnvSpectrumDetail from "@/views/spectrum/env_spectrum/index.vue";
import ZlaSpectrumDetail from "@/views/spectrum/zla_spectrum/index.vue";
import ZlbSpectrumDetail from "@/views/spectrum/zlb_spectrum/index.vue";
import ModelData from "@/views/model/data/index.vue";
import axios from "axios";
import StackedLineChart from "@/views/tool/build/ChartComponent.vue"; // 路径根据项目调整

export default {
  name: "Dfb",
  components: {
    StackedLineChart,
    EnvSpectrumDetail,
    ModelData,
    ZlaSpectrumDetail,
    ZlbSpectrumDetail,
  },
  data() {
    return {
      selectedSpectrums: [], // 存储选中的光谱数据
      savingRows: new Set(), // 记录正在保存的行
      drawerVisible: false, // 抽屉显示状态
      currentRow: null, // 当前编辑的行数据
      editForm: {}, // 编辑表单数据
      drawerLoading: false, // 抽屉加载状态
      xAxisData: [],
      seriesData: [],
      analyzePayload: null,
      orginAnalyzePayload: null,
      analyzeResult: null,
      modelNo: "", // 模型编号
      sampleSpectrumNo: "", // 样品光谱编号
      envSpectrumNo: "", // 环境光谱编号

      selectedEnvSpectrum: null, // 选中的环境光谱数据
      selectedModelData: null, // 选中的模型数据
      selectedSampleSpectrum: null, // 选中的样品光谱数据

      envSpectrumDialogVisible: false,
      modelDataDialogVisible: false,
      sampleSpectrumDialogVisible: false,
      zlaSpectrumDialogVisible: false,
      zlbSpectrumDialogVisible: false,
      // 遮罩层
      loading: true,
      // 干燥流化床车间在线分析历史表格数据
      dfbList: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        onlineResultNo: null,
        constituentId: null,
        constituentName: null,
        predicted: null,
        departmentName: null,
        departmentId: null,
        instrumentId: null,
        instrumentNo: null,
        instrumentName: null,
        modelId: null,
        modelNo: null,
        samplingTime: null,
        remarks: null,
        isDelete: null,
        creatorId: null,
        creator: null,
        modifierId: null,
        modifier: null,
        modifyTime: null,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleUpdate(row) {
      this.currentRow = row;
      this.editForm = { ...row }; // 深拷贝数据
      this.drawerVisible = true;
    },
    handleDelete(row) {
      this.$confirm("确认删除该分析结果？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 调用删除API
          delOffline(row.onlineResultId).then((response) => {
            if (response.code === 200) {
              this.$message.success("删除成功");
              this.getList(); // 重新加载列表
            }
          });
        })
        .catch(() => {
          // 取消删除
        });
    },
    async handleDrawerConfirm() {
      try {
        this.drawerLoading = true;
        const response = await updateOffline(this.editForm);
        if (response.code === 200) {
          this.$message.success("更新成功");
          // 更新表格数据
          Object.assign(this.currentRow, this.editForm);
          this.drawerVisible = false;
        }
      } finally {
        this.drawerLoading = false;
      }
    },

    // 保存函数
    async handleSave(row) {
      try {
        this.savingRows.add(row.onlineResultNo);

        const payload = {
          modelId: row.modelId,
          onlineResultNo: row.onlineResultNo,
          predicted: row.predicted,
          constituentName: row.constituentName,
          constituentId: row.constituentId,
          departmentName: row.departmentName,
          departmentId: row.departmentId,
          instrumentId: row.instrumentId,
          instrumentNo: row.instrumentNo,
          instrumentName: row.instrumentName,
          modelName: row.modelName,
          modelNo: row.modelNo,
          samplingTime: row.samplingTime,
          sampleSpectrumId: row.sampleSpectrumId,
          sampleSpectrumNo: row.sampleSpectrumNo,
          envSpectrumId: row.envSpectrumId,
          envSpectrumNo: row.envSpectrumNo,
        };
        // 调用保存API
        const response = await addOffline(payload);

        if (response.code === 200) {
          this.$message.success("保存成功");
          // 更新行数据
          row.isSaved = true;
          // 如果有返回的新数据，可以更新row
          Object.assign(row, response.data);
        }
      } catch (error) {
        this.$message.error("保存失败");
      } finally {
        this.savingRows.delete(row.onlineResultNo);
      }
    },
    // 提交样品光谱
    submitSampleForm() {
      if (this.zlaSpectrumDialogVisible) {
        this.sampleSpectrumNo = this.selectedSampleSpectrum.sampleSpectrumPelNo;
        this.zlaSpectrumDialogVisible = false;
      } else if (this.zlbSpectrumDialogVisible) {
        this.sampleSpectrumNo = this.selectedSampleSpectrum.sampleSpectrumDfbNo;
        this.zlbSpectrumDialogVisible = false;
      }
      this.sampleSpectrumDialogVisible = false;
      console.log("提交选中的样品光谱", this.selectedSampleSpectrum);

      // 在这里添加曲线绘制代码
      const newSeries = [];
      let xAxisSet = new Set();

      for (const row of this.selectedSpectrums) {
        const start = Number(row.startWavelength);
        const end = Number(row.endWavelength);
        const waveStr = row.wavelength;
        const waveArr = waveStr.split(",").map(Number);

        const x = Array.from({ length: end - start }, (_, i) =>
          (start + i).toString()
        );
        x.forEach((w) => xAxisSet.add(w));

        newSeries.push({
          name: row.constructDetailNo,
          type: "line",
          data: waveArr,
        });
      }

      this.seriesData = newSeries;
      this.xAxisData = Array.from(xAxisSet).sort((a, b) => a - b);
    },
    handleAddZlaSpectrum() {
      this.zlaSpectrumDialogVisible = true;
    },
    handleAddZlbSpectrum() {
      this.zlbSpectrumDialogVisible = true;
    },
    async handleStartAnalysis() {
      console.log("===== 开始分析流程 =====");

      // 检查是否选择了必要的数据
      console.log(
        "当前选择的数据:",
        "环境光谱:",
        this.selectedEnvSpectrum,
        "模型数据:",
        this.selectedModelData,
        "样品光谱:",
        this.selectedSampleSpectrum
      );

      // 验证必填参数
      if (
        !this.selectedEnvSpectrum?.envSpectrumNo ||
        !this.selectedModelData?.modelId ||
        // !this.selectedSampleSpectrum?.sampleSpectrumPelNo
        !this.selectedSampleSpectrum?.sampleSpectrumDfbNo
      ) {
        this.$message.warning("请先选择环境光谱、模型和样品光谱数据！");
        console.warn("分析中断：缺少必要的选择数据");
        return;
      }

      try {
        // 构造请求参数
        const payload = {
          envSpectrumNo: this.selectedEnvSpectrum.envSpectrumNo,
          modelId: this.selectedModelData.modelId,
          sampleSpectrumNo:
            this.selectedSampleSpectrum.sampleSpectrumPelNo ||
            this.selectedSampleSpectrum.sampleSpectrumDfbNo,
        };
        console.log("构造的分析请求参数:", payload);

        // 发起分析请求
        console.log("正在调用 getAnalyzePayload 接口...");
        const response = await getAnalyzePayload(payload);
        console.log("getAnalyzePayload 接口返回结果:", response);

        if (response.code === 200) {
          // 补充波长数据
          response.data.waveData = this.selectedSampleSpectrum.wavelength;
          console.log("补充波长数据后的响应结果:", response);

          this.orginAnalyzePayload = response;
          this.getList();

          // 转换数据格式
          console.log("开始转换数据格式...");
          this.analyzePayload = this.convertBlackToWhiteFormat(
            this.orginAnalyzePayload
          );
          console.log("转换后的数据格式:", this.analyzePayload);

          // 发送最终分析请求
          console.log("正在调用定量分析接口...");
          this.analyzeResult = await axios.post(
            "/quantita-offlines/quantita-offline",
            this.analyzePayload
          );
          // 如果成功
          if (this.analyzeResult.status === 200) {
            this.$message.success("分析完成");
          }

          const predictedResult = this.analyzeResult.data.result.y_predict[0];
          console.log("定量分析接口返回结果:", this.analyzeResult);
          console.log("预测值:", predictedResult);

          // 处理waveData并绘制图表
          if (this.orginAnalyzePayload?.data?.waveData) {
            this.processWaveDataForChart(
              this.orginAnalyzePayload.data.waveData
            );
          }

          // 添加以下代码来向 dfbList 添加新行
          const newRow = {
            // onlineResultNo: "RES-" + Date.now(), // 生成唯一编号
            constituentName:
              this.selectedModelData.constituentName || "未知成分", // 从模型数据中获取
            constituentId: this.selectedModelData.constituentId || "未知成分ID",
            sampleSpectrumNo: this.selectedSampleSpectrum.sampleSpectrumPelNo,
            sampleSpectrumId: this.selectedSampleSpectrum.sampleSpectrumPelId,
            envSpectrumNo: this.selectedEnvSpectrum.envSpectrumNo,
            envSpectrumId: this.selectedEnvSpectrum.envSpectrumId,
            predicted: this.analyzeResult.data.result.y_predict[0], // 从分析结果中获取预测值
            modelId: this.selectedModelData.modelId,
            modelNo: this.selectedModelData.modelNo,
            departmentName: this.selectedModelData.departmentName || "未知部门",
            departmentId: this.selectedModelData.departmentId || "未知部门ID",
            instrumentNo:
              this.selectedSampleSpectrum.instrumentNo || "未知仪器编号",
            instrumentId:
              this.selectedSampleSpectrum.instrumentId || "未知仪器ID",
            instrumentName:
              this.selectedSampleSpectrum.instrumentName || "未知仪器",
            samplingTime:
              this.selectedSampleSpectrum.samplingTime || new Date(), // 当前时间
            isSaved: false, // 添加这一行
          };

          // 将新行添加到列表开头
          this.dfbList.unshift(newRow);
        } else {
          this.$message.error(response.msg || "分析失败");
          console.error("分析失败，错误信息:", response.msg);
        }
      } catch (error) {
        this.$message.error("分析请求失败");
        console.error("分析流程发生错误:", error);
      } finally {
        console.log("===== 分析流程结束 =====");
      }
    },

    // 处理waveData并更新图表
    processWaveDataForChart(waveData) {
      if (!waveData || !Array.isArray(waveData)) {
        console.warn("waveData格式不正确或为空");
        return;
      }

      console.log("开始处理waveData用于图表显示:", waveData);

      try {
        // 假设waveData是波长值的数组，如[400, 401, 402, ...]
        const wavelengthArray = waveData;

        // 生成X轴数据（波长值）
        this.xAxisData = wavelengthArray.map((wave) => wave.toString());

        // 创建系列数据 - 使用样品光谱数据
        if (this.selectedSampleSpectrum?.wavelength) {
          const sampleWavelengthStr = this.selectedSampleSpectrum.wavelength;
          const sampleData = sampleWavelengthStr.split(",").map(Number);

          // 确保数据长度匹配
          if (sampleData.length === wavelengthArray.length) {
            this.seriesData = [
              {
                name: "样品光谱",
                type: "line",
                data: sampleData,
                lineStyle: {
                  color: "#409EFF",
                  width: 2,
                },
                itemStyle: {
                  color: "#409EFF",
                },
              },
            ];
            console.log("图表数据已更新:", {
              xAxisData: this.xAxisData,
              seriesData: this.seriesData,
            });
          } else {
            console.warn("波长数据长度不匹配");
          }
        }
      } catch (error) {
        console.error("处理waveData时出错:", error);
      }
    },
    convertBlackToWhiteFormat(response) {
      // 从响应中提取数据（假设数据在response.data中）
      const blackData = response?.data || {};

      try {
        // 解析coef字段（字符串数组转数组）
        const coef = blackData.coef
          ? JSON.parse(blackData.coef)
          : [];
        // 获取intercept字段（数值类型）
        const intercept = blackData.intercept ?? 0;

        // 解析selectedIndices字段（字符串数组转数组）
        const selectedIndices = blackData.selectedIndices
          ? JSON.parse(blackData.selectedIndices).map((idx) =>
              parseInt(idx, 10)
            )
          : [];

        // 解析validPreSequence字段（字符串JSON数组转数组）
        const validPreSequence = blackData.validPreSequence
          ? JSON.parse(blackData.validPreSequence)
          : [];


        // 处理waveData并转换为整数二维数组
        let waveData = [];
        if (blackData.waveData) {
          const waveDataArr = blackData.waveData.split(",").map((item) => {
            const num = Number(item.trim());
            return isNaN(num) ? 0 : Math.round(num); // 转为整数
          });
          waveData = [waveDataArr];
        }

        // 组装目标格式数据
        return {
          vail_pre_sequence: validPreSequence,
          wave_data: waveData,
          selected_indices: selectedIndices,
          coef: coef,
          intercept: intercept,
        };
      } catch (error) {
        console.error("数据转换失败:", error);
        // 转换失败时返回空对象或默认结构
        return {
          vail_pre_sequence: [],
          wave_data: [],
          selected_indices: [],
          coef: [],
          intercept: 0,
        };
      }
    },
    handleImportExcelSpectrum() {
      this.$message.info("功能正在开发中，敬请期待！...");
    },
    handleImportSampleSpectrum() {
      this.sampleSpectrumDialogVisible = true;
    },

    // 导入模型
    submitModelDataForm() {
      this.modelDataDialogVisible = false;
      if (this.selectedModelData) {
        // 处理选中的模型数据
        this.modelNo = this.selectedModelData.modelNo; // 假设模型数据有 modelNo 字段
        // 调用函数获取模型数据，存储起来
        // model_details表里面获取coef 数组，获取intercept，获取
        // 干脆写一个接口，后台直接根据模型编号和样品光谱编号获得json
        console.log("提交选中的模型数据", this.selectedModelData);
      } else {
        this.$message.warning("请先选择一个模型数据");
      }
    },
    handleImportModel() {
      this.modelDataDialogVisible = true;
    },
    submitEnvForm() {
      this.envSpectrumNo = this.selectedEnvSpectrum.envSpectrumNo;
      this.envSpectrumDialogVisible = false;
    },
    handleSelectionZlaSpectrum(selection) {
      const tableRef = this.$refs.zlaData.$refs.zlaSpectrumTable;
      if (selection.length > 1) {
        const lastSelected = selection[selection.length - 1];
        this.$nextTick(() => {
          tableRef.clearSelection(); // 清除所有选中
          tableRef.toggleRowSelection(lastSelected, true); // 仅保留当前选中
        });
        this.selectedSampleSpectrum = lastSelected;
      } else {
        this.selectedSampleSpectrum = selection[0] || null;
        this.selectedSpectrums = selection; // 存储选中的数据
      }
      console.log("查看选中的制粒一样品光谱", this.selectedSampleSpectrum);
    },
    handleSelectionZlbSpectrum(selection) {
      const tableRef = this.$refs.zlbData.$refs.zlbSpectrumTable;
      if (selection.length > 1) {
        const lastSelected = selection[selection.length - 1];
        this.$nextTick(() => {
          tableRef.clearSelection(); // 清除所有选中
          tableRef.toggleRowSelection(lastSelected, true); // 仅保留当前选中
        });
        this.selectedSampleSpectrum = lastSelected;
      } else {
        this.selectedSampleSpectrum = selection[0] || null;
        this.selectedSpectrums = selection; // 存储选中的数据
      }
      console.log("查看选中的制粒二样品光谱", this.selectedSampleSpectrum);
    },
    handleModelRowSelection(selection) {
      const tableRef = this.$refs.modelData.$refs.modelTable;
      if (selection.length > 1) {
        const lastSelected = selection[selection.length - 1];
        this.$nextTick(() => {
          tableRef.clearSelection(); // 清除所有选中
          tableRef.toggleRowSelection(lastSelected, true); // 仅保留当前选中
        });
        this.selectedModelData = lastSelected;
      } else {
        this.selectedModelData = selection[0] || null;
      }
      console.log("查看选中的模型数据", this.selectedModelData);
    },
    handleSelectionChangeEnvSpectrum(selection) {
      const tableRefEnv = this.$refs.envData.$refs.envTable;
      if (selection.length > 1) {
        const lastSelected = selection[selection.length - 1];
        this.$nextTick(() => {
          tableRefEnv.clearSelection(); // 清除所有选中
          tableRefEnv.toggleRowSelection(lastSelected, true); // 仅保留当前选中
        });
        this.selectedEnvSpectrum = lastSelected;
      } else {
        this.selectedEnvSpectrum = selection[0] || null;
      }
      console.log("查看选中的环境光谱", this.selectedEnvSpectrum);
    },

    handleAddEnvSpectrum() {
      this.envSpectrumDialogVisible = true;
    },
    handleViewHistory() {
      this.$router.push("/dfb_history");
    },
    /** 查询干燥流化床车间在线分析历史列表 */
    getList() {
      this.loading = true;
      listOffline(this.queryParams).then((response) => {
        this.dfbList = response.rows.map((row) => ({
          ...row,
          isSaved: true, // 历史数据标记为已保存
        }));
        this.total = response.total;
        this.loading = false;
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.onlineResultId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
  },
};
</script>
<style scoped>
.action-group {
  display: flex;
  flex-direction: column;
}

.id-text {
  font-size: 12px;
  color: #409eff;
  margin-top: 4px;
}

.header {
  display: flex;
  justify-content: space-around;
}

.content {
  display: flex;
  justify-content: space-between;
  height: 60%; /* 减去头部和底部的高度 */
  margin: 5px 0;
}

.right-chart {
  width: 49.5%;
  border: 1px solid #ddd;
}

.chart-title {
  font-size: 1.2em;
  margin-bottom: 10px;
  text-align: center;
}

.chart-area {
  height: 35vh; /* 根据实际需要调整高度 */
  background-color: #f9f9f9;
}

.content {
  display: flex;
  height: 100%;
}

.button-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 保证所有按钮左对齐 */
  justify-content: space-between; /* 自动拉开间距 */
  margin-right: 20px;
  padding: 0;
}

.button-panel .el-button {
  margin: 0; /* 清除可能的默认 margin */
}

.left-chart {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chart-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.drawer-footer {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px 20px;
  background: #fff;
  border-top: 1px solid #eee;
}
</style>
